---

---

<style>
  @keyframes spinner {
    to {
      transform: rotate(360deg);
    }
  }
  .spinner:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    margin-left: -7px;
    border-radius: 50%;
    border: 2px solid #fff;
    border-top-color: #333;
    animation: spinner 0.6s linear infinite;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const starCountElement = document.getElementById("star-count");
    if (starCountElement) {
      starCountElement.classList.add("spinner");

      fetch("https://api.github.com/repos/danstepanov/create-expo-stack")
        .then((response) => response.json())
        .then((data) => {
          starCountElement.classList.remove("spinner");
          const starCount = data.stargazers_count;
          starCountElement.textContent = starCount;
        })
        .catch((error) => {
          starCountElement.classList.remove("spinner");
          console.error("Error:", error);
        });
    }
  });
</script>
<a
  target="_blank"
  rel="noreferrer noopener"
  href="https://github.com/danstepanov/create-expo-stack"
  class="text-sm m-2 md:text-base group border hover:no-underline border-zinc-400/50 bg-gradient-to-r from-amber-500/30 to-white/5 rounded-full p-2 px-3 sm:p-1 sm:px-2 mx-auto flex gap-2 items-center text-zinc-50 font-thin duration-300 hover:border-zinc-300/50 shadow-[0_0_0.5rem_0_#fff2] hover:shadow-[0_0_5rem_0_#fff4]"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="duration-150 group-hover:stroke-amber-500 group-hover:rotate-180 lucide lucide-sparkles"
  >
    <path
      d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"
    ></path>
    <path d="M5 3v4"></path>
    <path d="M19 17v4"></path>
    <path d="M3 5h4"></path>
    <path d="M17 19h4"></path>
  </svg>
  <span
    id="star-count"
    class="bg-gradient-to-br from-yellow-500 to-orange-500 bg-clip-text text-transparent drop-shadow-xl font-bold"
  ></span>
  <span class="opacity-50">|</span>
  <span class="hidden sm:block">Give us a star on Github</span>
  <span class="sm:hidden">Star us on Github</span>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="duration-300 group-hover:translate-x-0.5 lucide lucide-chevron-right"
  >
    <path d="m9 18 6-6-6-6"></path>
  </svg>
</a>
